import { StyleSheet, Image, Platform, View, Pressable, ScrollView } from 'react-native';

import { Icon, Input, IconElement, Card, TopNavigation, Button, TopNavigationAction, Text, Calendar, Layout, I18nConfig, NativeDateService } from '@ui-kitten/components';


export default function KonwScreen() {
  return (
    <>
      <TopNavigation alignment='center' title="知识库" />
      <ScrollView>
        <Layout style={{ backgroundColor: '#F4F4F4', flex: 1, padding: 15 }}>
          <Text style={{ fontSize: 30, color: '#3D3D3D', marginTop: 50, textAlign: 'center' }}>ADHD 知识</Text>
          <Text style={{ fontSize: 14, color: '#999999', marginTop: 20, textAlign: 'center' }}>花几分钟了解一下，ADHD 知识</Text>
          <View style={{ width: 246, height: 246, backgroundColor: '#D8D8D8', marginHorizontal: 'auto', marginTop: 30, borderRadius: 8 }}></View>
          <Pressable>
            <View style={{ width: 187, height: 56, backgroundColor: '#D8D8D8', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginHorizontal: 'auto', marginTop: 30, borderRadius: 4 }}>
              <View style={styles.sanjiao}></View>
              <Text>开始</Text>
            </View>
          </Pressable>
        </Layout>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  sanjiao: {
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 10,
    borderRightWidth: 10, // 控制三角形的大小
    borderTopWidth: 8, // 控制三角形的大小
    borderBottomWidth: 8, // 控制三角形的大小
    borderRightColor: 'transparent',
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent', // 三角形的颜色
    borderLeftColor: '#999', // 三角形的颜色
    width: 0, // 根据需要调整以控制三角形的大小
    height: 0, // 根据需要调整以控制三角形的大小
  },
});
